<!DOCTYPE html>
<htm lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 1. id, 2.tag name 3. class */
            /* tag name:  p,h,a */
            /* id:  getElementByID, # */
            /* class:  getElementByClassName, . */
            /* #first {
            color:red;font-size:12px;
            }
            .second {
                color:rgb(0, 255, 157);font-size:12px;
            } */
            /* * {
                color:red;font-size:12px;
            } */
            /* 使用, 所有组合选中所有元素 */
            h1,span {
                color: red;font-size: 14px;
            }

            /* p {
                color: red;font-size: 20px;
            } */
        </style>
    </head>

    <body>
        <p id="first">这边显示该章节的内容……</p>
        <p class="second">内容2</p>
        <p>内容3</p>
        <span>extra span</span>
        <!-- 如何选中h1下的span -->
        <h1>
            <H1>
                <span>sub1</span>
                <span>sub1</span>
            </H1>
        </h1>
    </body>
</htm>